<script lang="ts" setup>
	import { ref, watch } from 'vue'
	import {
		onPageScroll,
		onReady,
		onShow,
		onShareAppMessage,
	} from '@dcloudio/uni-app'
	import { useScrollUpdownBottomContent } from '@/hooks'
	import { useSubPage } from './composables'
	import { getScenes } from '@/services/api'
	import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
	import { useUserStore } from '@/stores'
	import { notActiveBar } from '@/components/not-active-bar'
	import { gradePopup } from '@/components/grade-popup'
	import storageApi from '@/utils/storage'
	const isAnimation = ref(false)
	const autoplay = ref(2000)
	const {
		navBarInfo,
		loginHandle,
		navUserInfoPage,
		navCommonProblemPage,
		navbarInitFinishHandle,
	} = useSubPage()
	onShareAppMessage((e) => {
		return {
			title: '语境佳',
			path: '/pages/typeStudy/dialogue/index',
		}
	})
	const { style: authInfoScrollStyle, scrollHandle: authInfoScrollHandle } =
		useScrollUpdownBottomContent('up', 80)
	const userStore = useUserStore()
	const isShow = ref(false)
	const gradePopup = ref(null)
	const gradeName = ref('一年级')
	const swiperIndex = ref(0)
	const notActiveBar = ref(null)
	let timer = null
	const list = ref([])
	const total = ref(0)
	onShow(() => {
		// setTimeout(() => {
		//   userStore.checkUserSn()
		// }, 1000)
		timer = setInterval(() => {
			if (storageApi.get('gradeData') && storageApi.get('token')) {
				gradeName.value = storageApi.get('gradeData').name
				getData()
				clearInterval(timer)
			}
		}, 100)
		if(notActiveBar.value){
			notActiveBar.value.show()
		}

		// setTimeout(() => {
		// 	notActiveBar.value.show()
		// }, 2000)

	})
	onReady(() => {
		notActiveBar.value.show()
	})
	onPageScroll((e) => { })
	const swiperChange = (e) => {
		swiperIndex.value = e.detail.current
	}
	// 监听是否绑定设备
	watch(()=> userStore.getIfBindSn,(val)=>{
			notActiveBar.value.show()
		})
		// 监听是否第一次扫码绑定设备 是的话打开选择年级
	watch(()=> userStore.getIsFirstBind,(val)=>{
		if(val){
			showPopup()
		}
		})

	const jumpPage = (type, mode) => {
		switch (type) {
			case 1:
				tnNavPage(`/home-page/temp/video-center?mode=${mode}`)
				break
			case 2:
				tnNavPage(`/home-page/temp/audio-list`)
				break
		}
	}

	const refreshData = () => {
		userStore.cutCurrentCgPage()
		isAnimation.value = true
		getData()
	}

	const showPopup = () => {
		gradePopup.value.show()
	}

	const handleUpdate = () => {
		userStore.cutCurrentCgPage(1)
		userStore.cutCurrentDrPage(1)
		
		let name = storageApi.get('gradeData').name
		console.log(name)
		gradeName.value = name
		getData()
	}

	const getData = () => {
		let gradeData = storageApi.get('gradeData')
		let params = {
			page: userStore.currentCgPage,
			pageSize: 6,
			grade: gradeData.grade || 1,
			level: gradeData.level || 0,
			volume: gradeData.volume || 0,
		}
		getScenes(params).then((res) => {
			const { code, data } = res
			if (code === 0) {
				clearInterval(timer)
				total.value = data.total
				if (data.dataList == null) {
					if (userStore.currentCgPage == 1) {
						uni.showToast({
							title: '当前教材设置下暂无数据',
							duration: 2000,
							icon: 'none',
						})
						list.value = []
					} else {
						userStore.cutCurrentCgPage(1)
						getData()
					}
				} else {
					list.value = data.dataList
					setTimeout(() => {
						isAnimation.value = false
					}, 1000)
				}
			}
		})
	}

	const toActivePage = async (item) => {
		console.log(userStore.getIfBindSn)
		if (userStore.getIfBindSn) {
			tnNavPage(`/home-page/typeStudy/en-answer?id=${item.id}&name=${item.name}`)
		} else {
			uni.showModal({
				title: '设备未激活',
				content: '学习英语需要长期坚持哦，超多权益等你来解锁',
				confirmText: '立即激活',
				cancelText: '放弃福利',
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定')
						userStore.toScanMate()
					} else if (res.cancel) {
						console.log('用户点击取消')
						tnNavPage('/pages/index/index', 'switchTab')
					}
				},
			})
		}
	}
</script>

<template>
	<TnNavbar fixed bg-color="#f1f5fb" :bottom-shadow="false" :placeholder="false" back-icon="" back-text=" "
		home-icon="" indexUrl="pages/typeStudy/dialogue/index" @init-finish="navbarInitFinishHandle">
		<view class="tn-color-black" style="font-size: 34rpx">场景练习</view>
	</TnNavbar>
	<!-- 顶部背景 -->
	<view class="top-bg" />
	<!-- 页面内容 -->
	<view class="page" :style="{ paddingTop: `${navBarInfo.height - 34}px` }">
		<view class="card-swiper" :circular="true" @click="tn('/pageA/navigation/navigation')" :autoplay="false"
			duration="500" interval="18000" @change="cardSwiper">
			<view v-for="(item, index) in 1" :key="index"
				style="position: relative">
				<view class="swiper-item2 image-banner">
					<image
						src="https://cdn.nlark.com/yuque/0/2023/png/280373/1702622459812-assets/web-upload/f6850ebf-e261-4e67-9574-53c5c83def10.png"
						mode="aspectFit"></image>
				</view>
				<!-- 临时用的 -->
				<view class="grade" @tap.stop="showPopup">
					{{ gradeName }}
					<image class="toggle-icon" src="@/static/imgs/icons/toggle_icon.png" mode="widthFix"></image>
				</view>
				<swiper class="swiper" circular :current="swiperIndex" :indicator-dots="false" :autoplay="true" :interval="2000" :duration="500" @change="swiperChange">
					<swiper-item>
						<view class="swiper-item swiper-item-text">
							<view class="banner-box">
								<image
									src="http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/static/banner/banner2.png"
									mode="widthFix"></image>
								<!-- <view class="tips-one">
                  <view class="t1">HI~ </view>
                  <view class="t2"
                    >我是你的专属外教老师lily，和我一起练习英语场景吧</view
                  >
                </view>
                <view class="tips-two">
                  <view class="t1">情景1自由聊</view>
                  <view class="t2">每天口语10分钟，进阶口语达人</view>
                </view> -->
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item uni-bg-green">
							<image
								src="http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/static/banner/banner1.png"
								mode="widthFix" @click="jumpPage(1, 'qq_one')"></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item uni-bg-green">
							<image
								src="http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/static/banner/banner5.png"
								mode="widthFix" @click="jumpPage(1, 'qq_two')"></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item uni-bg-blue">
							<image
								src="http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/static/banner/banner4.png"
								mode="widthFix" @click="jumpPage(1, 'cj')"></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item uni-bg-blue">
							<image
								src="http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/static/banner/banner3.png"
								mode="widthFix" @click="jumpPage(2)"></image>
						</view>
					</swiper-item>
				</swiper>
				<view class="indication" >
					<view v-for="index in 5"  class="spot" :class="swiperIndex == index - 1 ? 'spot-active' : ''"></view>
				</view>
			</view>
		</view>
		<view class="flex flex-js-sb flex-ai-center pt-20 pb-16 plr-8">
			<view class="listi-title font-size-16 font-w-bold">
				专题提升 ({{ total }})
			</view>
			<view class="flex" @click="refreshData">
				<image class="mr-4 reset-icon" src="../../../static/imgs/refresh.png"
					:class="isAnimation ? 'refish' : ''"></image>
				<view class="font-color-c666 font-size-12">换一批</view>
			</view>
		</view>
		<view class="item-bar-main">
			<view class="item-bar" v-for="(item, index) in list" :key="index" @click="toActivePage(item)">
				<view style="height: 214rpx; color: #4473c8">
					<TnLazyLoad :src="item.picture" class="left-head" mode="aspectFill"></TnLazyLoad>
				</view>
				<view class="right-info">
					<view class="top_box flex flex-js-sb plr-12 pt-8">
						<view class="title font-size-16 font-w-bold" style="max-width: 212rpx">
							<view class="en-name"> {{ item.en_name }}</view>

							<text class="font-size-14 font-color-c666 zh-name">{{
                item.name
              }}</text>
						</view>
						<image v-if="item.isMem == 1" src="../../static/imgs/finish_icon.png" mode="widthFix"
							class="finish-icon-new"></image>
					</view>
				</view>
			</view>
			<view style="clear: both"></view>
		</view>
		<!-- <view
      class="tn-flex plr-12 ptb-16 tn-flex-wrap tn-padding-xs bg-color-white br-16"
    >
      <view
        class="special"
        v-for="(item, index) in list"
        :key="index"
        @click="toActivePage(item)"
      >
        <view
          class="tn-flex tn-flex-direction-column pl-12"
          style="
            height: 100%;
            color: #4473c8;
            border-radius: 28rpx;
            box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(52, 103, 194, 0.08);
          "
          :style="{ 'background-color': 'rgba' + item.bgColor }"
        >
          <view class="tn-text-lg tn-text-bold mt-12">
            <text
              class="tn-text-ellipsis font-size-16"
              :style="{ color: item.color }"
              >{{ item.name }}</text
            >
          </view>
          <view class="tn-text-xs tn-padding-top-xs mt-4">
            <text class="tn-text-ellipsis font-color-c999 font-size-12">{{
              item.enname
            }}</text>
          </view>
        </view>
        <image
          v-if="item.isMem == 1"
          src="../../static/imgs/finish_icon.png"
          mode="widthFix"
          class="finish-icon"
        ></image>
      </view>
    </view> -->
	</view>
	<notActiveBar ref="notActiveBar" :height="navBarInfo.height" />
	<gradePopup ref="gradePopup" @updateValue="handleUpdate" />
</template>

<style lang="scss" scoped>
	@import './styles/index.scss';

	.banner-box {
		position: relative;

		.tips-one {
			position: absolute;
			left: 36rpx;
			top: 130rpx;
			width: 50%;

			.t1 {
				font-family:
					PingFang SC,
					PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #ffffff;
				line-height: 48rpx;
				font-style: normal;
				text-transform: none;
			}

			.t2 {
				margin-top: 10rpx;
				width: 378rpx;
				font-family:
					PingFang SC,
					PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #ffffff;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}

		.tips-two {
			position: absolute;
			left: 36rpx;
			bottom: 78rpx;
			width: 50%;

			.t1 {
				height: 44rpx;
				font-family:
					PingFang SC,
					PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #4b49e8;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				padding-left: 44rpx;
			}

			.t2 {
				// width: 318rpx;
				height: 40rpx;
				font-family:
					PingFang SC,
					PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #6968c9;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}
	}

	.finish-icon-new {
		width: 40rpx;
	}

	:deep(.tn-navbar-back__text__icon) {
		display: none;
	}

	.en-name,
	.zh-name {
		width: 200rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	:deep(.tn-navbar-back__text) {
		display: none !important;
	}

	.tn-navbar-back__text {
		display: none !important;
	}

	.grade {
		z-index: 99;
		// width: 160rpx;
		height: 56rpx;
		line-height: 56rpx;
		background: #e1e0ff;
		border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
		color: #4b49e8;
		font-size: 24rpx;
		position: absolute;
		// top: 42rpx;
		vertical-align: middle;
		text-align: center;
		padding: 0 16rpx;
		top: 82rpx;
	}

	.toggle-icon {
		vertical-align: middle;
		width: 38rpx;
		margin-top: -6rpx;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	//临时
	.swiper {
		height: 380rpx;
		margin-top: 126rpx;
		image {
			height: 400rpx;
		}
	}

	.swiper-item {
		display: block;
		// height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}
</style>